<template>
  <div  class="container">
    <div class="top">
      <div class="left">
        <div class="count"><i class="xffont font-icon-test1"></i>当前时间：{{now}}</div>
        <div class="user-dy">
          <span><i class="xffont font-svg45-copy"></i>用户动态：</span>
          <div class="lamp" ref="lamp"></div>
        </div>
      </div>
      <div class="middle">
        <img src="../../../static/assets/icon.png" alt="" class="icon">
        <img src="../../../static/assets/title-2.png" alt="">
      </div>
      <div class="right">
        <div>
          <i class="xffont font-bulletin"></i>数据来源：招才引智创新发展大会网络平台（讯丰大数据实验室）
        </div>
        <div class="date">
          <i class="xffont font-icon-test1"></i>统计周期：{{daterange[0]}} 至 {{daterange[1]}}
          <div class="daterange">
            <el-date-picker
              popper-class="date-picker"
              value-format="yyyy-MM-dd"
              v-model="startDate"
              type="date"
              disabled
              :editable="false"
              :clearable="false"
              :picker-options="pickerOptions2">
            </el-date-picker>
            <el-date-picker
              popper-class="date-picker"
              value-format="yyyy-MM-dd"
              v-model="endDate"
              type="date"
              disabled
              :editable="false"
              :clearable="false">
            </el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <div class="top-count">
      <div class="item">
        <p class="detail">今日流量：浏览量（PV）：
          <grow-num :value="Number(baiduCount.pvCount || 0)"></grow-num>
        </p>
        <p class="detail">访客数（UV）：
          <grow-num :value="Number(baiduCount.visitorCount || 0)"></grow-num>
        </p>
        <p class="detail">IP数：
          <grow-num :value="Number(baiduCount.ipCount || 0)"></grow-num>
        </p>
        <p class="detail">跳出率：{{baiduCount.bounceRatio}}%</p>
        <p class="detail">平均访问时长（分：秒）：{{baiduCount.avgVisitTime}}</p>
      </div>
      <div class="item">
        <p class="detail">统计周期访问流量：浏览量（PV）：
          <grow-num :value="Number(baiduCount.pvCountByDate || 0)"></grow-num>
          （<grow-num :value="Number(baiduCount.pvCountByTotal || 0)"></grow-num>）
        </p>
        <p class="detail">访客数（UV）：
          <grow-num :value="Number(baiduCount.visitorCountByDate || 0)"></grow-num>
          （<grow-num :value="Number(baiduCount.visitorCountTotal || 0)"></grow-num>）</p>
        <p class="detail">IP数：
          <grow-num :value="Number(baiduCount.ipCountByDate || 0)"></grow-num>
          （<grow-num :value="Number(baiduCount.ipCountTotal || 0)"></grow-num>）</p>
        <p class="detail">跳出率：{{baiduCount.bounceRatioByDate}}%（{{baiduCount.bounceRatioTotal}}%）</p>
        <p class="detail">平均访问时长（分：秒）：{{baiduCount.avgVisitTimeByDate}}（{{baiduCount.avgVisitTimeTotal}}）</p>
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div class="left-top">
          <div class="left-top-con">
            <all-count-m></all-count-m>
          </div>
        </div>
        <div class="left-bottom">
          <div class="left-bottom-con">
            <education-m></education-m>
          </div>
        </div>
        <div class="left-bottom">
          <div class="left-bottom-con">
            <reach-education></reach-education>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="new-count">
          <new-count-m></new-count-m>
        </div>
        <div class="henan">
          <div style="height: 50%;">
            <map-corp-m></map-corp-m>
          </div>
          <div style="height: 50%;">
            <map-user-m></map-user-m>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-top">
          <div class="right-top-con">
            <industry-m></industry-m>
          </div>
        </div>
        <div class="right-middle">
          <div class="right-middle-con">
            <div style="width: 50%; height: 100%;">
              <corp-nature-m></corp-nature-m>
            </div>
            <div style="width: 50%; height: 100%;">
              <corp-industrial-m></corp-industrial-m>
            </div>
          </div>
        </div>
        <div class="right-bottom">
          <div class="right-bottom-con">
            <div style="width: 50%;">
              <rank-1-m></rank-1-m>
            </div>
            <div style="width: 50%;">
              <rank-3-m></rank-3-m>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import {mapMutations, mapGetters} from 'vuex'
import AllCountM from '../../components/all-count/all-count-m.vue'
import EducationM from '../../components/education/education-m.vue'
import GrowNum from '../../components/grow-num/grow-num.vue'
import NewCountM from '../../components/new-count/new-count-m.vue'
import MapCorpM from '../../components/map-corp/map-corp-m.vue'
import MapUserM from '../../components/map-user/map-user-m.vue'
import CorpNatureM from '../../components/corp-nature/corp-nature-m.vue'
import CorpIndustrialM from '../../components/corp-industrial/corp-industrial-m.vue'
import ReachEducation from '../../components/reach-education/reach-education.vue'
import Rank1M from '../../components/rank-1/rank-1-m.vue'
import Rank3M from '../../components/rank-3/rank-3-m.vue'
import IndustryM from '../../components/industry/industry-m.vue'
import {INTERVAL} from '../../common/js/config'

export default {
  components: {
    IndustryM,
    Rank3M,
    Rank1M,
    ReachEducation,
    CorpIndustrialM,
    CorpNatureM,
    MapUserM,
    MapCorpM,
    NewCountM,
    GrowNum,
    EducationM,
    AllCountM},
  data() {
    return {
      daterange: [],
      pickerOptions2: {
        disabledDate(date) {
          let now = new Date()
          return date.getTime() > now.getTime()
        }
      },
      dayCounts: '',
      allCounts: '',
      startDate: '',
      endDate: '',
      now: '',
      baiduCount: {}
    }
  },
  computed: {
    ...mapGetters([
      'currentTime'
    ])
  },
  methods: {
    ...mapMutations({
      setCurrentTime: 'SET_CURRENT_TIME'
    }),
    lamp(arr) {
      $(this.$refs.lamp).xfLamp({
        data: arr,
        end: () => {
          this.getDT()
        }
      })
    },
    getCount() {
      this.$post('/service/business/baiduApi/baiduApi/getBaiduSTT.xf', {}).then(res => {
        this.dayCounts = res.result.dayCounts
        this.allCounts = res.result.allCounts
      })
    },
    getDT() {
      this.$post('/service/business/statistic/statistic/getLogRecordList').then(res => {
        this.lamp(res.result.map(item => {
          return `[${item.username || '游客'}]${item.userOpFunction}[${item.userOpTime}]`
        }))
      })
    },
    async getBaiduTongji() {
      let res = await this.$post('/service/business/baiduApi/baiduApi/getBaiduStatistic', {
        beginDate: this.currentTime.start,
        endDate: this.currentTime.end
      })
      let o = {}
      if (res.result.baiduStt && res.result.baiduStt.length) {
        o = res.result.baiduStt[0]
        delete res.result.baiduStt
      }
      Object.assign(o, res.result)
      // avgVisitTime 今日平均访问时长
      // avgVisitTimeByDate 周期平均访问时长
      // avgVisitTimeTotal 周期平均访问时长
      o.avgVisitTime = this.secondToTime(o.avgVisitTime)
      o.avgVisitTimeByDate = this.secondToTime(o.avgVisitTimeByDate)
      o.avgVisitTimeTotal = this.secondToTime(o.avgVisitTimeTotal)
      this.baiduCount = o
    },
    secondToTime(second) { // 秒数转换为时间
      if (!second) return '00:00'
      let mm = Math.floor(second / 60)
      let ss = second % 60
      return `${mm < 10 ? '0' + mm : mm}:${ss < 10 ? '0' + ss : ss}`
    },
    start() {
      clearInterval(this.timer)
      this.getBaiduTongji()
      this.timer = setInterval(() => {
        this.getBaiduTongji()
      }, INTERVAL)
    },
    getNow() {
      this.now = this.$dateFormat(new Date(), 'yyyy年MM月dd日 hh:mm:ss')
      setTimeout(() => {
        this.getNow()
      }, 1000)
    }
  },
  created() {
    this.daterange = [this.currentTime.start, this.currentTime.end]
    this.startDate = this.currentTime.start
    this.endDate = this.currentTime.end
    this.start()
    this.getNow()
    this.$watch('daterange', (newVal, oldVal) => {
      this.start()
      if (newVal[0] === oldVal[0] && newVal[1] === oldVal[1]) return
      this.setCurrentTime({
        start: newVal[0],
        end: newVal[1]
      })
    })
    this.$watch('startDate', newVal => {
      if (new Date(newVal.replace(/-/g, '/')).getTime() > new Date(this.daterange[1].replace(/-/g, '/')).getTime()) {
        this.startDate = this.daterange[1]
        this.daterange = [this.daterange[1], this.daterange[1]]
      } else {
        this.daterange = [newVal, this.daterange[1]]
      }
    })
    this.$watch('endDate', newVal => {
      if (new Date(this.daterange[0].replace(/-/g, '/')).getTime() > new Date(newVal.replace(/-/g, '/')).getTime()) {
        this.endDate = this.daterange[0]
        this.daterange = [this.daterange[0], this.daterange[0]]
      } else {
        this.daterange = [this.daterange[0], newVal]
      }
    })
  },
  mounted() {
    this.getDT()
  }
}
</script>
<style lang="scss" scoped>
  @import "../../common/style/variables";
  .container{
    background: url("./static/bg.jpg") no-repeat;
    background-size: 100% 100%;
    height: 100%;
  }
  .top-count{
    height: 6%;
    background: rgba(9,44,99,.5);
    margin: 0 auto;
    width: 96%;
    border-radius: 8px;
    color: #8cd1f7;
    font-size: 14px;
    .item{
      height: 50%;
      display: flex;
      align-items: center;
      .detail{
        padding: 0 15px;
        width: 28%;
        white-space: nowrap;
        &:not(:first-child){
          width: 18%;
        }
      }
    }
  }
  .top{
    height: 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      color: #8cd1f7;
      font-size: 14px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 15px 0 15px 20px;
      width: 25%;
      .xffont{
        color: #fff;
        margin-right: 5px;
      }
      .user-dy{
        display: flex;
        span{
          white-space: nowrap;
        }
        .lamp{
          height: 25px;
          overflow: hidden;
          width: 350px;
          @include ellipsis;
        }
      }
    }
    .middle{
      display: flex;
      align-items: center;
      justify-content: center;
      .icon{
        margin: 0 10px 0 0;
      }
    }
    .right{
      width: 25%;
      color: #8cd1f7;
      font-size: 14px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 15px 0 15px 20px;
      .date{
        position: relative;
      }
      .xffont{
        color: #fff;
        margin-right: 5px;
      }
      .daterange{
        position: absolute;
        white-space: nowrap;
        bottom: 0;
        left: 0;
        opacity: 0;
      }
    }
  }
  .main{
    height: 85%;
    padding: 0.5% 0 0 0;
    .left{
      width: 29%;
      height: 100%;
      float: left;
      padding: 0 0 0 2%;
      .left-top{
        height: 36%;
        padding: 0 0 1% 0;
        .left-top-con{
          background: rgba(9,44,99,.5);
          border-radius: 8px;
          height: 100%;
        }
      }
      .left-bottom{
        height: 32%;
        padding: 0 0 3% 0;
        .left-bottom-con{
          background: rgba(9,44,99,.5);
          border-radius: 8px;
          height: 100%;
        }
      }
    }
    .middle{
      width: 37.7%;
      height: 100%;
      float: left;
      .new-count{
        height: 15%;
        padding: 0 0 0 10px;
      }
      .henan{
        height: 85%;
      }
    }
    .right{
      width: 33.3%;
      height: 100%;
      float: left;
      padding: 0 2% 0.8% 10px;
      .right-top{
        height: 48%;
        .right-top-con{
          background: rgba(9,44,99,.5);
          border-radius: 8px;
          height: 100%;
        }
      }
      .right-middle{
        height: 32%;
        padding-top: 10px;
        .right-middle-con{
          background: rgba(9,44,99,.5);
          border-radius: 8px;
          height: 100%;
          display: flex;
        }
      }
      .right-bottom{
        height: 20%;
        padding: 10px 0 0 0;
        .right-bottom-con{
          background: rgba(9,44,99,.5);
          border-radius: 8px;
          height: 100%;
          display: flex;
        }
      }
    }
  }
</style>
